import React from 'react';
import {Card , Table , Button, Modal, message} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';

export default class BasicTable extends React.Component {

    state = {
        dataSource2 : []
    }
    params = {
        page:1
    }
    componentDidMount(){
        const data = [
            {
                id:'0',
                userName:'Jack', 
                sex:'1',
                state:'1',
                interest:'1',
                birthday:'2000-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
            },
            {
                id: '1',
                userName: 'Tom',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },
            {
                id: '2',
                userName: 'Lily',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },
        ];
        //循环设置key属性，不设置控制台会有警告
        data.map((item,index)=>{
            item.key = index;
        });
        this.setState({
            dataSource : data
        });
        this.request();
    }
    request = ()=>{
        let _this = this;
        axios.ajax({
            url:'/table/list',
            data:{
                params:{
                    page:this.params.page
                }
            }
        }).then((res)=>{
            if(res.code == 0){
                //循环设置key属性，不设置控制台会有警告
                res.result.list.map((item,index)=>{
                    item.key = index;
                });
                this.setState({
                    dataSource2:res.result.list,
                    selectedRowKeys:[],
                    selectedRows:null,
                    pagination:Utils.pagination(res,(current)=>{
                        _this.params.page = current;
                        this.request();
                    })
                });
            }
        });
    }
    //保存用户点击的哪一行
    onRowClick = (record,index)=>{
        let selectKey = [index];
        // Modal.info({
        //     title:'信息',
        //     content:`用户名：${record.userName}，用户爱好：${record.interest}`
        // });
        this.setState({
            selectedRowKeys:selectKey,
            selectItem:record
        });
    }

    onRowNultiClick = (record,index)=>{
        let selectKey = [index];
        // Modal.info({
        //     title:'信息',
        //     content:`用户名：${record.userName}，用户爱好：${record.interest}`
        // });
        let rowKeys = [];
        let records = [];
        if(this.state.selectedMultiRowKeys){
            rowKeys = this.state.selectedMultiRowKeys;
            rowKeys.push(selectKey[0]);
            records = this.state.selectedRows;
        }else{
            rowKeys = selectKey;
            records = [record];
        }
        this.setState({
            selectedMultiRowKeys:rowKeys,
            selectedRows:records
        });
    }

    handleMultiDelete = (record,index)=>{
        let rows = this.state.selectedRows;
        let names = [];
        rows.map((item,index)=>{
            names.push(item.userName)
        });
        Modal.confirm({
            title:'删除提示',
            content: `您确定要删除这些数据吗？${names.join(',')}`,
            onOk:()=>{
                message.success('删除成功');
            }
        })
    }

    handleDelete = ()=>{
        let rows = this.state.selectItem;
        message.info(`删除成功:${rows.userName}`);
       
    }

    render (){
        const columns = [
            {
                title       : 'id',
                key         : 'id',
                dataIndex   : 'id'
            },
            {
                title       : '用户名',
                key         : 'userName',
                dataIndex   : 'userName'
            },
            {
                title: '性别',
                key: 'sex',
                dataIndex: 'sex',
                render(sex){
                    return sex === 1 ?'男':'女'
                }
            },
            {
                title: '状态',
                key: 'state',
                dataIndex: 'state',
                render(state){
                    let config  = {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子',
                        '4':'百度FE',
                        '5':'创业者'
                    }
                    return config[state];
                }
            },
            {
                title: '爱好',
                key: 'interest',
                dataIndex: 'interest',
                render(abc) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[abc];
                }
            },
            {
                title: '生日',
                key: 'birthday',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                key: 'address',
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                key: 'time',
                dataIndex: 'time'
            }
        ];
        const selectedRowKeys = this.state.selectedRowKeys;
        const rowSelection = {
            type : 'radio',
            selectedRowKeys,
            onChange:(selectedRowKeys,selectedRows)=>{
                this.setState({
                    selectedRowKeys,
                    selectItem:selectedRows[0]
                });
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            }
        };
        const selectedMultiRowKeys = this.state.selectedMultiRowKeys;
        const rowMultiSelection = {
            type : 'checkbox',
            selectedRowKeys : selectedMultiRowKeys,
            onChange:(selectedRowKeys,selectedRows)=>{
                this.setState({
                    selectedMultiRowKeys : selectedRowKeys,
                    selectedRows:selectedRows
                });
            }
        };
        return (
            <div>
                <Card title="基础表格" >
                    <Table 
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Card>
                <Card title="动态数据渲染表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false} 
                    />
                </Card>
                <Card title="Mock-单选">
                    <div>
                        <Button onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table
                        bordered
                        rowSelection={rowSelection}
                        onRow={(record,index)=>{
                            return {
                                onClick:()=>{
                                    this.onRowClick(record,index);
                                }
                            };
                        }}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={this.state.pagination} 
                    />
                </Card>

                <Card title="Mock-多选">
                    <div>
                        <Button onClick={this.handleMultiDelete}>删除</Button>
                    </div>
                    <Table
                        bordered
                        rowSelection={rowMultiSelection}
                        onRow={(record,index)=>{
                            return {
                                onClick:()=>{
                                    this.onRowNultiClick(record,index);
                                }
                            };
                        }}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false} 
                    />
                </Card>
            </div>
        );
    }
}